<template>
  <div>
    <div class="nav-box">
      <!-- <div> -->
      <div class="nav-message" v-show="!flag&&!this.$route.meta.leftIcon">
        <i class="icon iconfont icon-message"></i>
      </div>
      <!-- <div class="nav-message" v-show='!flag'> -->
      <div class="nav-message search_tit" v-show="flag||this.$route.meta.leftIcon" @click="goBack">
        <i class="icon iconfont icon-left"></i>
      </div>
      <!-- </div> -->
      <div class="div-bor">
        <i class="icon iconfont icon-search"></i>
        <input type="text" class="user" :placeholder="search" v-model="word" @focus="flag=true" />
      </div>
      <!-- <div class="nav-cart"> -->
      <router-link class="nav-cart" :to="`/cart`" tag="div" v-show="!flag">
        <i class="icon iconfont icon-cart"></i>
      </router-link>
      <div class="nav-cart search_tit" v-show="flag">
        <span @click="showSearch()">搜索</span>
      </div>
    </div>
    <div>
      <transition enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
        <!-- <search-component v-show="flag" :items="hotword"></search-component> -->
          <div class="search_component" v-show='flag'>
    <!-- <div class="search_full"></div> -->
    <div class="search_history">
      <div class="history_top">
        <div class="history_one">
          <i class="icon iconfont icon-search"></i>
        </div>
        <div class="history_two">
          <span>历史搜索</span>
        </div>
        <div class="history_three">
          <i class="icon iconfont icon-trash"></i>
        </div>
      </div>
      <div class="history_bottom">
        <div class="historic_records">
          <div class="history_search" v-for="(v,i) in history" :key="i">
            <span>{{ v }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="popular_searches">
      <div class="popular_top">
        <div class="popular_one">
          <i class="icon iconfont icon-star"></i>
        </div>
        <div class="popular_two">
          <span>热门搜索</span>
        </div>
      </div>
      <div class="popular_bottom">
        <div class="hot_word" @click.capture='searchHot($event)'>
          <div class="word_all" v-for="(v,i) in hotword" :key="i" @click.stop>
            <span :style="`color=${v.color}`">{{ v.frontword }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
      </transition>
    </div>
  </div>
</template>
<script>
// import SearchComponent from "../components/SearchComponent";
export default {
  components: {
    // SearchComponent
  },
  data() {
    return {
      flag: false,
      search: "女装",
      word: "",
      hotword: [],
      comp: "",
      history:[]
    };
  },
  // filters:{
  //   new(){
  //     let set = new Set(this.history);
  //     return set
  //   }
  // },
  // watch:{
  //   history:function(){
  //     let set = new Set(this.history);
  //     this.history = set;
  //   }
  // },
  methods: {
    showSearch() {
      if (this.word != "") {
        this.search = this.word;
        this.word = "";
        this.flag = !this.flag;
        this.history.push(this.search);
        this.$router.push({ path: '/search', query: { items: this.search }})
      }
    },
    goBack() {
      this.flag = !this.flag;
      if (this.$route.path == "/search" && this.flag == true) {
        this.$router.go(-1);
        this.flag = !this.flag;
      }else{
        // this.$router.go(-2);
      }
    },
    loadHotWordMsg() {
      this.$api
        .loadHotWord({
          platform: "H5",
          code: "hotWord,sketch"
        })
        .then(data => {
          // console.log(data);
          // this.searchList = data.wall.docs
          this.hotword = data.hotWord.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    searchHot(e){
      // console.log(e.target.innerText);
      
      this.$router.push({ path: '/search', query: { items: e.target.innerText }})
      this.history.push(e.target.innerText);
      this.flag = !this.flag;
    }
  },
  mounted() {
    this.loadHotWordMsg();
  },
  beforeMount() {
    this.$root.$on("upfontword", arg => {
      this.comp = arg;
    });
  }
};
</script>
<style lang="less" scoped>
.search_tit {
  font-size: 32px;
  font-weight: bold;
}
.nav-box {
  position: fixed;
  width: 100vw;
  height: 100px;
  display: flex;
  flex-flow: row nowrap;
  border-bottom: #dedede;
  background: white;
  z-index: 99;
  //   justify-content: space-between;
  border: 1px solid #dedede;

  .nav-message {
    // float: left;
    width: 100px;
    height: 100%;
    text-align: center;
    line-height: 100px;
    > .icon-message {
      font-size: 54px;
    }
  }
  .nav-cart {
    width: 100px;
    height: 100%;
    text-align: center;
    line-height: 100px;
    > .icon-cart {
      font-size: 54px;
    }
  }
  .div-bor {
    // float: left;
    flex-grow: 1;
    display: flex;

    align-items: center;
    position: relative;
    width: 300px;

    .icon-search {
      width: 50px;
      height: 50px;
      padding-top: 25px;
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: 5;
      background-position: 0px 0px;
    }
    .user {
      width: 100%;
      height: 60px;
      background: #dedede;
      border: none;
      border-radius: 12px;
      padding-left: 50px;
      outline: none;
    }
  }
}
.search_component {
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: white;
  position: absolute;
  top:100px;
//   border: 1px solid red;
  .search_full {
    width: 100%;
    height: 100px;
  }
  .search_history {
    width: 100%;
    // height: 200px;
    border-bottom: 1px solid #7a7b92;
    .history_top {
      width: 100%;
      height: 100px;
      //   background-color: red;
      text-align: left;
      display: flex;
      //   border: 1px solid blue;
      //   margin-top: 50px;
      color: #7a7b92;
      .history_one {
        width: 100px;
        height: 100%;
        // border: 1px solid red;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .history_two {
        flex-grow: 1;
        //   width:100px;
        height: 100%;
        // border: 1px solid green;
        display: flex;
        align-items: center;
      }
      .history_three {
        width: 100px;
        height: 100%;
        // border: 1px solid orange;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .history_bottom {
      width: 100%;
      //   height: 100px;
      padding-bottom: 50px;
      display: flex;
      align-items: center;
      justify-content: center;

      .historic_records {
        width: 80%;
        height: 100%;
        display: flex;
        .history_search {
          height: 60%;
          border: 1px solid #dedede;
          padding: 10px;
          border-radius: 10px;
          margin: 10px;
          text-align: center;
          display: flex;
          align-items: center;
          font-size: 16px;
          color: #7a7b92;
        }
      }
    }
  }

  .popular_searches {
    width: 100%;
    .popular_top {
      width: 100%;
      height: 100px;
      display: flex;
      .popular_one {
        width: 100px;
        height: 100%;
        // border: 1px solid red;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .popular_two {
        flex-grow: 1;
        //   width:100px;
        height: 100%;
        // border: 1px solid green;
        display: flex;
        align-items: center;
      }
    }
    .popular_bottom {
      // width: 100%;
      //   height: 100px;
      display: flex;
      // align-items: center;
      justify-content: center;
      .hot_word{
        width:80%;
        display: flex;
        // justify-content: space-between;
        flex-wrap: wrap;
        .word_all{
          border: 1px solid #dedede;
          border-radius: 10px;
          margin: 10px;
          padding:5px 10px;
          font-size: 16px;
        }
      }
      
    }
  }
}
</style>